import 'dart:math';

import 'package:flutter/material.dart';
import 'package:practise/ui/colors.dart';

class SongList extends StatelessWidget {
  final data;

  SongList(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 15),
      padding: EdgeInsets.only(top: 20, bottom: 20),
      decoration:
          BoxDecoration(color: ProjectColors.CARD_DARK, borderRadius: BorderRadius.circular(8)),
      child: Padding(
        padding: EdgeInsets.only(left: 15, right: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(data['title'], style: TextStyle(color: ProjectColors.TEXT_GRAY, fontSize: 12)),
            Padding(padding: EdgeInsets.only(top: 3)),
            Row(
              children: [
                Icon(Icons.adjust_rounded, color: Colors.white, size: 15),
                Expanded(
                    child: Padding(
                  padding: EdgeInsets.only(left: 4),
                  child:
                      Text(data['subTitle'], style: TextStyle(color: Colors.white, fontSize: 15)),
                )),
                Container(
                  padding: EdgeInsets.fromLTRB(6, 3, 8, 3),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: ProjectColors.TEXT_GRAY, width: 1)),
                  child: Row(
                    children: [
                      Icon(Icons.play_arrow_rounded, size: 10, color: Colors.white),
                      Padding(padding: EdgeInsets.only(left: 2)),
                      Text('播放', style: TextStyle(color: Colors.white, fontSize: 10))
                    ],
                  ),
                )
              ],
            ),
            Padding(padding: EdgeInsets.only(top: 10)),
            _getPlayList(data['creatives']
            )
          ],
        ),
      ),
    );
  }

  _getPlayList(List playList) {
    final height = 60 * 3;
    return Container(
      height: height.toDouble(),
      child: ListView.builder(
          itemBuilder: (context, index) {
            final width = MediaQuery.of(context).size.width - 15 * 2 - 50;
            return Container(
              width: width,
              margin: EdgeInsets.only(right: 15),
              child: _getPlayListItem(playList[index]['resources']),
            );
          },
          scrollDirection: Axis.horizontal,
          itemCount: playList.length),
    );
  }

  _getPlayListItem(List songList) {
    return ListView.builder(
      itemBuilder: (context, index) {
        final item = songList[index]['uiElement'];
        return Container(
            padding: EdgeInsets.only(bottom: 4),
            child: Stack(
              children: [
                Row(
                  children: [
                    Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.network(
                            item['image']['imageUrl'],
                            width: 56,
                            height: 56,
                          ),
                        ),
                        Positioned(
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0,
                            child: Icon(Icons.play_arrow_rounded, size: 20, color: Colors.white70))
                      ],
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 8),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Container(
                                constraints: BoxConstraints.loose(Size(150, 30)),
                                child: Text(
                                  item['mainTitle']['title'],
                                  style: TextStyle(color: Colors.white, fontSize: 16),
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                ),
                              ),
                              Padding(padding: EdgeInsets.only(left: 2)),
                              Text('-', style: TextStyle(color: ProjectColors.TEXT_GRAY, fontSize: 8)),
                              Padding(padding: EdgeInsets.only(left: 2)),
                              Container(
                                constraints: BoxConstraints.loose(Size(60, 30)),
                                child: Text(item['artists']['name'],
                                    style: TextStyle(color: ProjectColors.TEXT_GRAY, fontSize: 10),
                                    maxLines: 1),
                              )
                            ],
                          ),
                          Padding(padding: EdgeInsets.only(top: 4)),
                          Text(item['subTitle']['title'],
                              style: TextStyle(color: ProjectColors.TEXT_GRAY, fontSize: 10),
                              maxLines: 1)
                        ],
                      ),
                    )
                  ],
                ),
                Positioned(
                  child: Container(
                    height: 0.2,
                    width: 300,
                    color: Colors.grey,
                  ),
                  left: 60,
                  bottom: 0)
              ],
            ),
        );
      },
      itemCount: songList.length,
      physics: NeverScrollableScrollPhysics(),
    );
  }
}
